<template>
    <el-row class="home" :gutter="20">
        <el-col :span="16" style="margin-top: 20px">
            <el-card shadow="hover" style="height: 300px">
                <div class="title" style="text-align: center;">虚拟机</div>
                <div></div>
                <el-table :data="virtualData">
                    <el-table-column 
                    v-for="(val,key) in virtualLable"
                    :key="key"
                    :prop="key"
                    :label="val"
                    >
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card style="margin-top: 20px;height: 300px">
                <div class="title" style="text-align: center;">服务器</div>
                <div></div>
                <el-table :data="serverData">
                    <el-table-column 
                    v-for="(val,key) in serverLable"
                    :key="key"
                    :prop="key"
                    :label="val"
                    >
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="margin-top: 20px;height: 620px">
                <el-table :data="ipData">
                    <el-table-column 
                    v-for="(val,key) in ipLable"
                    :key="key"
                    :prop="key"
                    :label="val"
                    >
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    
</template>
<script>
import { getData,getSsh,getIp } from '../../api/data.js';
export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'monitor',
    data () {
        return {
            virtualAddTest:'',
            virtualDelTest:'',
            serverAddTest:'',
            serverDelTest:'',
            virtualData:[
                
            ],
            virtualLable:{
                time: '时间',
                cpu_percent	: 'CPU占用率',
                mem_percent	: '内存占用率',
                disk_percent: '磁盘占用率',
                network_percent	: '网络占用率',
                host: 'ip'
            },
            serverData:[
                
            ],
            serverLable:{
                time: '时间',
                cpu_percent	: 'CPU占用率',
                mem_percent	: '内存占用率',
                disk_percent: '磁盘占用率',
                network_percent	: '网络占用率',
                host : 'ip'
            },
            ipData:[

            ],
            ipLable:{
                virtualIp: '虚拟机ip',
                serverIp: '服务器ip'
            },
        }
    },
    mounted(){
        getData().then(res => {
            const data = res.data
            const code =20000
            if(code === 20000){
                this.virtualData = data.currentData.data
            } 
            console.log(res)
        }),
        getSsh().then(res => {
            const data = res.data
            const code =20000
            if(code === 20000){
                this.serverData = data.currentData.data
            } 
            console.log(res)
        }),
        getIp().then(res => {
            const data = res.data
            const code =20000
            if(code === 20000){
                console.log(data)
                const serverIpData = data.data.serverIp
                const virtualIpData = data.data.virtualIp
                console.log(serverIpData)
                this.ipData = []
                for(let index = 0;index < serverIpData.length; index++)
                    this.ipData.push({
                        virtualIp: virtualIpData[index],
                        serverIp: serverIpData[index]
                    })
            } 
            console.log(res)
        })
    },
}
</script>

<style>

</style>